<template lang="html">
    <div class="other">
        <myHeader :hasBack="false"></myHeader>
        <div class="money-func">
            <div class="title">
                <img class="moneyIcon" :src="moneyIcon" alt="">
                <span>金币记录</span>
            </div>
            <div class="desc">
                <span>哒啦啦，我要培养省钱的好习惯<img class="redpackIcon" :src="redpackIcon" />~</span>
            </div>
            <div class="cell">
                <router-link :to="{ name: 'typeList', params: {} }">
                    <div class="cell-item">
                        <span>类型管理</span>
                        <i class="iconfont icon-iconfontjiantou5" />
                    </div>
                </router-link>
                <router-link :to="{ name: 'storeList', params: {} }">
                    <div class="cell-item">
                        <span>店铺管理</span>
                        <i class="iconfont icon-iconfontjiantou5" />
                    </div>
                </router-link>
                <!-- <router-link :to="{ name: 'chargeAdd', params: {} }">
                    <div class="cell-item">
                        <span>记账了</span>
                        <i class="iconfont icon-iconfontjiantou5" />
                    </div>
                </router-link> -->
                <router-link :to="{ name: 'chargeList', params: {} }">
                    <div class="cell-item">
                        <span>账单列表</span>
                        <i class="iconfont icon-iconfontjiantou5" />
                    </div>
                </router-link>
            </div>
        </div>
        <tabbar curSelect="other" />
    </div>
</template>

<script>
import tabbar from './base/tabbar'
export default {
    data(){
        return {
            moneyIcon: require('@/assets/images/yuanbao.png'),
            redpackIcon: require('@/assets/images/hongbao.png')
        }
    },
    components: {
        tabbar
    }
}
</script>

<style lang="scss" scoped>
    .other{
        background: #F3F3F3;
        height: 100%;
        .money-func{
            margin-top: .1rem;
            .title{
                line-height: .38rem;
                padding-left: .1rem;
                font-size: .14rem;
                background: #fff;
                .moneyIcon{
                    width: .18rem;
                    height: .18rem;
                    vertical-align: sub;
                }
            }
            .desc{
                margin-top: .02rem;
                background: #fff;
                line-height: .56rem;
                text-align: center;
                font-size: .16rem;
                .redpackIcon{
                    width: .24rem;
                    height: .24rem;
                    vertical-align: middle;
                }
            }
            .cell{
                margin-top: .02rem;
                background: #fff;
                &-item{
                    height: .44rem;
                    padding: .1rem .15rem;

                    box-sizing: border-box;
                    border-bottom: 1px solid #F3F3F3;
                    display: flex;
                    justify-content: space-between;
                }
                &-item:active{
                    background: #F3F3F3;
                }
            }
        }
    }
</style>
